<template>
  <div class="table">
      <table>
        <thead>
          <tr>
            <th>编号</th>
            <th>用户名</th>
            <th>人员编号</th>
            <th>所属角色</th>
            <th>说明</th>
            <th>新建时间</th>
            <th>是否有效</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in policeList" :key="index">
            <td>{{item.bianhao}}</td>
            <td>{{item.user}}</td>
            <td>{{item.peoplebianhao}}</td>
            <td>{{item.duty}}</td>
            <td>{{item.shuoming}}</td>
            <td>{{item.time}}</td>
            <td>{{item.valid}}</td>
            <td>
              <span><i class="xiugai"></i>修改</span>
              <span><i class="delete"></i>删除</span>
              <span><i class="chongzhi"></i>重置密码</span>
            </td>
          </tr>
        </tbody>
      </table>
      <Footer />
  </div>
</template>

<script>
import Footer from './Footer.vue'
export default {
  components:{
    Footer
  },
  data(){
    return {
      policeList:[
        {
          bianhao:1,
          user:'张三',
          peoplebianhao:20050011,
          duty:'管理员',
          shuoming:'该账号拥有所有权限',
          time:'2016-11-10 10: 00: 00',
          valid:'是'
        },
        {
          bianhao:1,
          user:'张三',
          peoplebianhao:20050011,
          duty:'管理员',
          shuoming:'该账号拥有所有权限',
          time:'2016-11-10 10: 00: 00',
          valid:'是'
        },
        {
          bianhao:1,
          user:'张三',
          peoplebianhao:20050011,
          duty:'管理员',
          shuoming:'该账号拥有所有权限',
          time:'2016-11-10 10: 00: 00',
          valid:'是'
        },
        {
          bianhao:1,
          user:'张三',
          peoplebianhao:20050011,
          duty:'管理员',
          shuoming:'该账号拥有所有权限',
          time:'2016-11-10 10: 00: 00',
          valid:'是'
        },
        {
          bianhao:1,
          user:'张三',
          peoplebianhao:20050011,
          duty:'管理员',
          shuoming:'该账号拥有所有权限',
          time:'2016-11-10 10: 00: 00',
          valid:'是'
        },
        {
          bianhao:1,
          user:'张三',
          peoplebianhao:20050011,
          duty:'管理员',
          shuoming:'该账号拥有所有权限',
          time:'2016-11-10 10: 00: 00',
          valid:'是'
        },
        {
          bianhao:1,
          user:'张三',
          peoplebianhao:20050011,
          duty:'管理员',
          shuoming:'该账号拥有所有权限',
          time:'2016-11-10 10: 00: 00',
          valid:'是'
        },
      ]
    }
  }
}
</script>

<style lang="less">
.table{
  width: 100%;
  table{
    width: 100%;
    border-spacing: 0 4px;
    border-collapse: separate;
      thead{
        tr{
          text-align: center;
          line-height: 40px;
          border: 1px solid #ccc;
          border-radius: 5px;
          background: #fff;
          height: 40px;
          box-shadow: 1px 2px 1px 0px #ccc;
          th:first-child{
            border-radius: 8px 0 0 8px;
          }
          th:last-child{
            border-radius: 0 8px 8px 0;
          }
        }
      }
      tbody{
        tr{
          text-align: center;
          line-height: 40px;
          border: 1px solid #ccc;
          border-radius: 5px;
          background: #fff;
          height: 40px;
          font-size: 14px;
          box-shadow: 1px 2px 1px 0px #ccc;
          td:first-child{
            border-radius: 8px 0 0 8px;
          }
          td:last-child{
            border-radius: 0 8px 8px 0;       
              i{
                padding-left: 14px;
              }
              span{
                margin-left: 10px;
                cursor: pointer;
              }
              .xiugai{
                 background: url('../../../assets/images/icon xiugai.png') no-repeat 0px 2px;
              }
              .delete{
                 background: url('../../../assets/images/icon shanchu.png') no-repeat 0px 2px;
              }
              .chongzhi{
                background: url('../../../assets/images/icon chongzhimima.png') no-repeat 0px 2px;
              }
          }
        }
      }     
  }
}
</style>